$base-bg-color: var(--compvis-bg);
$base-box-bg: #30323F;
$base-btn-bg: var(--compvis-btn-bg);
$base-btn-color: var(--compvis-color);


// 布局
$left-width: 240px;
$right-width: 240px;
$center-bg-color: #000;

// 编辑区域
$size: 0.7185;
$editor-width: calc(1920px * $size);
$editor-height: calc(1080px * $size);
$header-height: calc(96px * $size);

$comp-height: calc(($editor-height - $header-height) / 2);
// 四布局
$comp-width-4: calc($editor-width / 2);
// 五布局
$comp-width-5: 300px;
// 六布局
$comp-width-6: calc($editor-width / 3);

header {
  width: 100%;
  height: 48px;
  background-color: $base-bg-color;
  border: 1px solid var(--compvis-border);;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header_title {
    width: 380px;
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    letter-spacing: 5px;
    color: #fff;
    background: url('@/assets/home/header_title.png')no-repeat;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
  }
  .header_oper {
    width: 360px;
    margin-right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .oper_btn {
      width: 80px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $base-btn-color;
      background-color: $base-btn-bg;
      border-radius: 2px;
      cursor: pointer;
      span {
        margin-left: 4px;
      }
    }
    .line_c {
      width: 1px;
      height: 16px;
      background-color: $base-btn-bg;
    }
    .oper_l {
      display: flex;
      border-radius: 2px;
      background-color: $base-btn-bg;
    }
  }
}
main {
  width: 100vw;
  height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  background-color: $base-bg-color;
  position: relative;
  .container_l {
    width: $left-width;
    height: 100%;
    overflow: auto;
    transition: all .3s;
    user-select: none;
    overflow: hidden;
    &.retract{
      width: 0;
    }
    .con_l_box {
      width: 100%;
      padding: 0px 16px 16px 16px;
      border-bottom: 1px solid  var(--compvis-border);
      &.active {
        padding: 0px 16px 0px 16px;
        .con_l_title img{
          transform: rotate(180deg);
        }
        .con_l_c {
          display: none;
        }
      }
      .con_l_title {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $base-btn-color;
        cursor: pointer;
        span{
          font-size: 16px;
          font-family: SourceHanSansCN-Regular;
          font-weight: 800;
        }
      }
      .con_l_c {
        width: 100%;
        height: auto;
        transition: all .3s;
        .l_c_war {
          width: 208px;
          height: 24px;
          display: flex;
          align-items: center;
          background-color: rgba(255,198,43,0.05);
          border-radius: 2px;
          img{
            margin: 0 8px;
          }
          span {
            color: var(--compvis-warn-color);
            font-size: 12px;
            font-family: SourceHanSansCN-Regular;
          }
        }
        .l_layout {
          width: 208px;
          height: 148px;
          margin-top: 16px;
          background-color: $base-box-bg;
          border-radius: 2px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          &.active {
            border: 1px solid var(--compvis-warn-color);
          }
          span{
            line-height: 32px;
            color: $base-btn-color;
            font-family: SourceHanSansCN-Regular;
            font-size: 14px;
          }
        }
        .com_box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .com_item {
            width: 96px;
            height: 96px;
            border-radius: 2px;
            background-color: $base-box-bg;
            margin-top: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            cursor: move;
            img {
              width: 58px;
              height: 58px;
              margin-top: 8px;
            }
            span {
              line-height: 30px;
              color: $base-btn-color;
              font-size: 14px;
              font-family: SourceHanSansCN-Regular;
            }
          }
        }
      }
    }
  }
  .container_c {
    flex: 1;
    position: relative;
    background-color: #000;
    overflow: auto;
    position: relative;
    .editor_c {
      // transform: scale(1) translate(30px, 45px);
      width: $editor-width;
      height: $editor-height;
      position: relative;
      background: url(@/assets/bg.png)no-repeat;
      .editor_header {
        width:100%;
        height: $header-height;
        position: absolute;
      }
      .item {
        padding: 6px;
        .item_bg, .comp-item {
          width: 100%;
          height: 100%;
          background: rgba(0,20,49,0.4);
          border-image: linear-gradient(180deg, rgba(134, 194, 255, 0), rgba(134, 194, 255, 1)) 1 1;
          border: 2px solid transparent;
        }
        &.select {
          .comp-item{
            // box-sizing: border-box;
            border: 2px solid var(--compvis-warn-color);
          }
        }
      }
      .item4 {
        width: $comp-width-4;
        height: $comp-height;
        position: absolute;
        top: $header-height;
        &:nth-child(2), &:nth-child(4) {
          left: $comp-width-4;
        }
        &:nth-child(3), &:nth-child(4) {
          top: calc($comp-height + $header-height);
        }
      }
      .item5 {
        width: $comp-width-5;
        height: $comp-height;
        position: absolute;
        top: $header-height;
        &:nth-child(2) {
          top: calc($comp-height + $header-height);
        }
        &:nth-child(3) {
          left: $comp-width-5;
          width: calc(100% - $comp-width-5*2);
          height: calc($comp-height*2);
        }
        &:nth-child(4) {
          left: calc($editor-width - $comp-width-5);
        }
        &:nth-child(5) {
          left: calc($editor-width - $comp-width-5);
          top: calc($comp-height + $header-height);
        }
      }
      .item6 {
        width: $comp-width-6;
        height: $comp-height;
        position: absolute;
        top: $header-height;
        &:nth-child(2), &:nth-child(5) {
          left: $comp-width-6;
        }
        &:nth-child(3), &:nth-child(6) {
          left: calc($comp-width-6 * 2);
        }
        &:nth-child(4), &:nth-child(5), &:nth-child(6) {
          top: calc($comp-height + $header-height);
        }
      }
      .line4 {
        position: absolute;
        background-color: #2c2c2c;
        &::after{
          content: '';
          position: absolute;
          width: 6px;
          height: 40px;
          background-color: #333131;
          box-shadow: 0 0 0 1px rgb(141, 135, 135);
          top: calc(25% - 20px);
          left: -3px;
          z-index: 999;
          border-radius: 4px;
          cursor: e-resize;
        }

        &.line_v {
          width: 2px;
          height: calc($editor-height - $header-height);
          left: $comp-width-4;
          top: $header-height;
          cursor: e-resize;
        }

        &.line_h {
          width: $editor-width;
          height: 2px;
          top: calc($comp-height + $header-height);
          &::after{
            width: 40px;
            height: 6px;
            top: -3px;
            left: calc(25% - 20px);
            cursor: n-resize;
          }
        }
        &.active {
          background-color: #00f7c7;
          &::after{
            background-color: #00f7c7;
          }
        }
      }
      .line5 {
        position: absolute;
        background-color: #2c2c2c;
        &::after{
          content: '';
          position: absolute;
          width: 6px;
          height: 40px;
          background-color: #333131;
          box-shadow: 0 0 0 1px rgb(141, 135, 135);
          top: calc(25% - 20px);
          left: -3px;
          z-index: 999;
          border-radius: 4px;
          cursor: e-resize;
        }

        &.line_v_l, &.line_v_r {
          width: 2px;
          height: calc($comp-height * 2);
          left: $comp-width-5;
          top: $header-height;
          cursor: e-resize;
        }

        &.line_v_r {
          left: calc($editor-width - $comp-width-5);
        }

        &.line_h_l {
          width: $comp-width-5;
          height: 2px;
          top: calc($comp-height + $header-height);
          &::after{
            width: 40px;
            height: 6px;
            top: -3px;
            left: calc(50% - 20px);
            cursor: n-resize;
          }
        }

        &.line_h_r {
          width: $comp-width-5;
          height: 2px;
          top: calc($comp-height + $header-height);
          right: 0;
          &::after{
            width: 40px;
            height: 6px;
            top: -3px;
            left: calc(50% - 20px);
            cursor: n-resize;
          }
        }
        &.active {
          background-color: #00f7c7;
          &::after{
            background-color: #00f7c7;
          }
        }
      }
      .line6 {
        position: absolute;
        background-color: #2c2c2c;
        &::after{
          content: '';
          position: absolute;
          width: 6px;
          height: 40px;
          background-color: #333131;
          box-shadow: 0 0 0 1px rgb(141, 135, 135);
          top: calc(25% - 20px);
          left: -3px;
          z-index: 999;
          border-radius: 4px;
          cursor: e-resize;
        }
        &.line_v_l,  &.line_v_r{
          width: 2px;
          height: calc($editor-height - $header-height);
          left: $comp-width-6;
          top: $header-height;
          cursor: e-resize;
        }
        &.line_v_r {
          left: calc($comp-width-6 * 2);
        }
        &.line_h {
          width: $editor-width;
          height: 2px;
          top: calc($comp-height + $header-height);
          &::after{
            width: 40px;
            height: 6px;
            top: -3px;
            left: calc(25% - 20px);
            cursor: n-resize;
          }
        }
        &.active {
          background-color: #00f7c7;
          &::after{
            background-color: #00f7c7;
          }
        }
      }
      .line_header {
        width: 100%;
        height: 2px;
        top: $header-height;
        &::after{
          width: 40px;
          height: 6px;
          top: -3px;
          left: calc(50% - 20px);
          cursor: n-resize;
        }
      }
    }
  }
  .container_r {
    width: $right-width;
    height: 100%;
    overflow: auto;
    background-color: $base-bg-color;
    transition: all .3s;
    &.retract{
      width: 0;
    }
  }
  .collapse {
    position: absolute;
    top: calc(50% - 48px);
    cursor: pointer;
    transition: all .3s;
    &.left{
      left: $left-width;
      &.active {
        left: 0;
      }
    }
    &.right{
      right: $right-width;
      &.active {
        right: 0;
      }
    }
  }
}

/* 定制整个滚动条 */
.container_c::-webkit-scrollbar {
  width: 3px;
  /* 定制滚动条的宽度 */
  height: 3px;
}

/* 定制滚动条轨道 */
.container_c::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 定制轨道的背景颜色 */
}

/* 定制滚动条的滑块（thumb） */
.container_c::-webkit-scrollbar-thumb {
  background: #888;
  /* 定制滑块的背景颜色 */
  border-radius: 4px;
}

/* 当滑块悬停或活动时的样式 */
.container_c::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 定制滑块在悬停状态下的背景颜色 */
}